import React, { useEffect, useState } from "react"
import { View, Image } from "@tarojs/components"
import NavLayout from "@@/components/layout/nav.layout"
import "./news.scss"
import service from "@@/services/data.service"
import userService from "@@/services/user.service"
import { activityIntro } from "@@/interfaces/api.interface"
import proxy from "../../../config/proxy"
import { useDidShow, usePageScroll, useReachBottom, navigateTo, pageScrollTo } from "@tarojs/taro"



const NewsPage = () => {
  const [newsList, setNewsList] = useState<activityIntro[]>([])
  const [currentNewsPage, setCurrentNewsPage] = useState(1);
  useDidShow(() => {
    pageScrollTo({
      // selector: "#NewsPage",
      scrollTop: -100,
    })
  })
  useEffect(() => {
    init();
  }, [])

  const init = async () => {
    let exhibitionId;
    const res = await userService.getExhibitionId()
    if (res.code === 200) {
      exhibitionId = res.data
    }

    // 新闻资讯列表
    service.getNew({ exhibitionId, pageSize: 6, currentPage: currentNewsPage }).then(rslt => {
      console.log(rslt.data.entities)
      setNewsList(rslt.data.entities)
    })
  }

  useReachBottom(() => {
    console.log("useReachBottom")

    setCurrentNewsPage(currentNewsPage + 1)
    service.getNew({ exhibitionId: 3, pageSize: 6, currentPage: currentNewsPage + 1 }).then(rslt => {
      setNewsList(newsList.concat(rslt.data.entities))
    })
  })
  const goProduct = (id: string) => {
    navigateTo({
      url: `/pages/newDetail/newDetail?id=${id}`
    })
  }
  return <NavLayout border title='新闻资讯' leftIconType="chevron-left" color="#141414" id="NewsPage">

    {/* 新闻资讯  */}
    <View className="partBox">
      <View className="newsList">
        {
          newsList.map(item => {
            return <View className='newsItem' key={item.id} onClick={goProduct.bind(this, item.id)}>
              <View className="newsImg">
                <Image src={`${proxy.sourceUrl}/${item.image}`}></Image>
              </View>
              <View className="title">{item.title}</View>
              <View className="desc">{item.introduction}</View>
            </View>
          })
        }
      </View>
    </View>
  </NavLayout>
}
export default NewsPage
